← BACK TO SITE
// DESIGN SYSTEM v1.0

Site to Sale

The visual language behind a premium, AI-powered creative studio. Warm ink, champagne gold, editorial serif and a quiet technical voice.

01 — BRAND MARK
S2S
S2SSITE
TO SALE
S2S
02 — COLOR

Warm ink & champagne gold

Backgrounds are warm near-blacks, never cold grey. Gold is the single accent — used sparingly for emphasis, never as fill.

Ink
#0C0A08
Panel
#15110C
Card
#17120C
Gold
#D4AF6A
Gold gradient
F0DCA8 → B8923F
Text / Primary
#F4EFE6
Text / Muted
#A89F90
Text / Faint
#5E564B
03 — TYPOGRAPHY
DISPLAY — CORMORANT GARAMOND
Aa Bb Cc
Editorial, high-contrast, romantic
UI / BODY — HANKEN GROTESK
Aa Bb Cc
Clean, modern, highly legible body text.
EYEBROW — JETBRAINS MONO
Aa Bb
// TECHNICAL LABELS
H1 / 92pxSee the better version.
H2 / 56pxYour bespoke AI operations.
H3 / 22pxOne team, fully done-for-you
Body / 16pxWe become your bespoke AI operations team — running the work that grows your business so you stay focused on what you do best.
Eyebrow// CHOOSE YOUR STARTING POINT
04 — BUTTONS & LABELS
Primary action → Secondary action TEXT LINK →
MOST POPULAR FROM $199 STATUS LABEL DIAMOND BULLET
05 — CARDS, RADIUS & ELEVATION

Standard card

Hairline gold border, 6px radius, warm gradient fill, soft shadow on hover.

FEATURED

Featured card

Brighter gold border and gold glow to mark the recommended choice.

// IMAGE PLACEHOLDER

Media card

Striped placeholders mark where real photography drops in.

2px — badges
3px — buttons
6px — cards
8px — panels
06 — MOTION PRINCIPLES
Reveal on scroll

Content fades up 30px with staggered children. Easing: cubic-bezier(.16,1,.3,1), ~1s.

Hover lift

Cards rise 8px, border brightens to 50% gold, soft gold shadow blooms beneath.

Parallax & shimmer

Hero imagery drifts on scroll; gold display words carry a slow left-to-right shimmer.